<template>
  <div style="padding: 10px">


    <el-card class="box-card">

      <div slot="header" class="clearfix">

        <span class="label">角色：</span>

        <el-select v-model="valueRole" placeholder="请选择" @change="changeRole">

          <el-option v-for="item in options" :key="item.roleId" :label="item.roleName" :value="item.roleId">

          </el-option>

        </el-select>

      </div>


      <div>

        <el-tree ref="tree" :data="menuData" :default-checked-keys="[7,1]" :props="props" node-key="menuId"
                 show-checkbox>

        </el-tree>


      </div>

    </el-card>

    <el-button type="primary" @click="onSubmitPermission">保存权限</el-button>


  </div>
</template>

<script>
import request from '@/utils/request';
export default {
  name: "Permission",
  components: {},

  //页面初始方法  调用生命周期
  created() {
    this.load()
  },
  methods: {

    changeRole() {
      request.post("/permission/boundrolemenu/" + this.valueRole).then(res => {
        this.check = res
        this.$refs.tree.setCheckedKeys(this.check);
      })

    },
    onSubmitPermission() {
      // console.log(this.valueRole)
      // console.log(this.$refs.tree.getCheckedKeys());
      request.post("/permission/backrolemenu/" + this.valueRole, this.$refs.tree.getCheckedKeys()).then(res => {
        if (res) {
          {
            this.$message({
              showClose: true,
              message: '恭喜你，添加成功哦~',
              type: 'success'
            });
          }
        } else {
          this.$message({
            showClose: true,
            message: '添加失败！',
            type: 'error'
          });
        }
      })
    },

    load() {
      request.get("/permission/selectrole").then(res => {
        this.tableData = res.records
        // this.total = res.total
        console.log(res)
        this.options = res
      })

      request.get("/permission/selectMenu").then(response => {
        console.log(response)
        this.menuData = response
        console.log(this.menuData)

      })
    },
  },
  data() {
    return {
      menuData: [],
      props: {
        label: 'menuName',
      },
      options: [],
      check: [],
      valueRole: '',
    };
  }

}
</script>

<style>

</style>
